<template>
    <div class="nocenter">
    <el-table :data="tableData" height="500" style="width: 100%" @row-click="handleRowClick">
        <el-table-column prop="title"  width="400">
            <template #default="{ row }">
                <span>{{ row.title }}</span>
              </template>
          </el-table-column>
        <el-table-column prop="date"  width="200" />
    </el-table>
    </div>
</template>
  
<script lang="ts" setup>
import { ref, onBeforeMount } from 'vue';
import axios from 'axios';
const tableData = ref([]);
import { useRouter } from "vue-router";
const router = useRouter();
// 定义一个异步函数用于从后端获取数据
const fetchTableData = async () => {
  try {
    const response = await axios.post('http://127.0.0.1:5000/news_show',{
      "code":0,
      "class":"工作通知"},
      {
        headers: {
          'Content-Type': 'application/json'
        },
      });
    tableData.value = response.data;
  } catch (error) {
    console.error('Failed to fetch data:', error);
  }
};


const handleRowClick = (row: any) => {
    const routeData = router.resolve({
    path: '/newsdetail',
   });
   localStorage.setItem('newstitle', row.title);
  window.open(routeData.href, '_blank');
  // 在这里执行你的逻辑，比如跳转到新页面
};

onBeforeMount(fetchTableData);
</script>

<style>
  .nocenter {
        align-self: flex-start; /* 或者使用 "self-start" */
        margin: 0; /* 移除任何可能的自动margin */
        margin-left: 30px; /* 或者你想要的任何值 */
        width: 700px;
  }

</style>
  